<script setup>
import headerRow from "@/components/header/header.vue";
import menuAside from "@/components/menu/menu.vue";
// import bref from "@/components/bref/bref.vue";
import tabs from "@/components/tabs/tabs.vue";
</script>
<template>
  <div>
    <el-header class="header">
      <headerRow></headerRow>
    </el-header>
    <el-container>
      <el-aside class="aside">
        <menuAside></menuAside>
      </el-aside>
      <el-container>
        <el-main class="main">
          <div style="box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px">
            <tabs></tabs>
            <router-view class="routerView"></router-view>
          </div>
          <!-- <bref></bref> -->
        </el-main>
        <!-- <el-footer class="footer">Footer</el-footer> -->
      </el-container>
    </el-container>
  </div>
</template>
<style lang="less" scoped>
.header {
  padding: 0;
}

.aside {
  width: auto;
}

.footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  height: calc(100vh - 60px);
  overflow: hidden;
}

.routerView {
  background-color: var(--bg-color);
  height: calc(100vh - 180px);
  border-radius: 0 0 5px 5px;
  padding: 10px;
}
</style>
